/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="dataset-detail-page">
        <sf-breadcrumb separator=">" style="margin:0 0 20px 0" has-return @return="onReturn">
            <sf-breadcrumb-item style="font-size: 12px;font-weight: normal;color: #3D3D3D;">
                <lang>数据集详情</lang>
            </sf-breadcrumb-item>
        </sf-breadcrumb>
        <div class="creat-dataset-warp">
            <sf-tab-panel size="large" path-name="tab" class="creat-dataset__tab-panel">
                <sf-tab-item title="数据集详情" tab="dataset">
                    <div class="tab-content">
                        <dataset-detail :data="detailData.dataset"
                                        :columns="detailData.columns"
                                        :tablesInfo="detailData.tablesInfo"
                                        :filesInfo="detailData.filesInfo"
                                        :source="source"
                                        @on-return="onReturn"
                                        @update="getData"/>
                    </div>
                </sf-tab-item>
                <sf-tab-item title="schema" tab="schema">
                    <div class="tab-content">
                        <schema :data="detailData.columns"
                                :dataset="dataset"
                                :dataspace="dataspace"
                                @update="getData"/>
                    </div>
                </sf-tab-item>
                <sf-tab-item title="文件" tab="file">
                    <div class="tab-content">
                        <file :dataset="dataset"
                              :dataspace="dataspace"
                              :data="detailData.dataset"
                              :tablesInfo="detailData.tablesInfo"
                              :filesInfo="detailData.filesInfo"/>
                    </div>
                </sf-tab-item>
                <sf-tab-item title="上传数据" tab="upload">
                    <div class="tab-content">
                        <upload-file :dataset="dataset"
                                     :dataspace="dataspace"/>
                    </div>
                </sf-tab-item>
            </sf-tab-panel>
        </div>
    </div>
</template>

<script>
import DatasetDetail from "./components/dataset_detail";
import Schema from "./components/schema";
import File from "./components/file";
import UploadFile from "./components/upload_file";

export default {
    components: {
        DatasetDetail,
        Schema,
        File,
        UploadFile
    },
    data() {
        return {
            detailData: {}
        }
    },
    computed: {
        source() {
            return this.$route.query.source;
        },
        dataset() {
            return this.$route.query.dataset;
        },
        dataspace() {
            return this.$route.query.dataspace;
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            this.$mask();
            let jsonData = await this.$ajax.get(`/ai-datalake/api/v2/dataspaces/${this.dataspace}/datasets/${this.dataset}`);
            this.$unmask();
            const {success, data, msg} = jsonData
            if (!success) {
                this.$showErr(msg);
                this.onReturn();
                return;
            }
            this.detailData = data;
        },
        onReturn() {
            this.$router.go(-1);
        },
    }
};
</script>

<style lang="less" scoped>
.dataset-detail-page {
    width: 100%;
    height: 100%;
    
    .creat-dataset-warp {
        height: calc(100% - 42px);
        
        .creat-dataset__tab-panel {
            height: 100%;
            
            /deep/ .sfv-tabpanel_header {
                height: 36px;
                
                .sfv-tabpanel_item {
                    margin-right: 8px;
                    height: 36px;
                    line-height: 36px;
                    background-color: #f5f6fa;
                    font-size: 14px;
                    font-weight: 600;
                }
                
                .sfv-tabpanel_item--active {
                    border-top: 2px solid #1770E6 !important;
                    border-bottom: none !important;
                    background-color: #ffffff;
                    color: #156AD9;
                }
            }
            
            /deep/ .sfv-tabpanel_wrap {
                height: calc(100% - 36px);
                
                .tabpanel-body-item {
                    height: 100%;
                    
                    .tab-content {
                        height: 100%;
                        padding: 24px 48px 0 24px;
                        
                    }
                }
            }
        }
    }
}
</style>
